<%-- 
    Document   : operaciones
    Created on : 09-abr-2013, 19:43:11
    Author     : Alumno
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
         <title>JSP Page</title>
    </head>
    <body>
          <form action="">
        <h2>APLICANDO JAVASCRIPT CON JQUERY</h2>
        <p>
            Número 1: <input type="text" name="n1" id="n1" />
        </p>
        <p>
            Número 2: <input type="text" name="n2" id="n2" />
        </p>
        <p>
            <input type="button" value="Sumar" name="btnSumar" id="btnSumar" />
            <input type="button" value="Restar" name="btnRestar" id="btnRestar" />
            <input type="button" value="Multiplicar" name="btnMultiplicar" id="btnMultiplicar" />
            <input type="button" value="Dividir" name="btnDividir" id="btnDividir" />
        </p>
        <div id="divProcesar"></div>
    </form>
    </body>
    <script type="text/javascript">

    $("#btnSumar").click(fn1BtnProcearClick);
	
    function fn1BtnProcearClick(){
        // Datos
        var n1 = parseInt( $("#n1").val() );
        var n2 = parseInt( $("#n2").val() );
        // Proceso
        var suma = n1 + n2;
        // Reporte
        var repo = "Respuesta:<br>" + n1 + " + " + n2 + " = " + suma;
        $("#divProcesar").html(repo);
    }
    
    $("#btnRestar").click(fn2BtnProcearClick);
	
    function fn2BtnProcearClick(){
        // Datos
        var n1 = parseInt( $("#n1").val() );
        var n2 = parseInt( $("#n2").val() );
        // Proceso
        var resta = n1 - n2;
        // Reporte
        var repo = n1 + " - " + n2 + " = " + resta;
        $("#divProcesar").html(repo);
    }
    
    $("#btnMultiplicar").click(fn3BtnProcearClick);
	
    function fn3BtnProcearClick(){
        // Datos
        var n1 = parseInt( $("#n1").val() );
        var n2 = parseInt( $("#n2").val() );
        // Proceso
        var producto = n1 * n2;
        // Reporte
        var repo = n1 + " * " + n2 + " = " + producto;
        $("#divProcesar").html(repo);
    }
    
    $("#btnDividir").click(fn4BtnProcearClick);
	
    function fn4BtnProcearClick(){
        // Datos
        var n1 = parseInt( $("#n1").val() );
        var n2 = parseInt( $("#n2").val() );
        // Proceso
        var divide = n1 / n2;
        // Reporte
        var repo = n1 + " / " + n2 + " = " + divide;
        $("#divProcesar").html(repo);
    }

</script>
    
</html>
